<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="org.apache.commons.lang.StringUtils" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
  String basePath = request.getContextPath();
  Object email = request.getSession().getAttribute("email");
%>
<!DOCTYPE HTML>
<html>
<head>
  <title>${story.title}</title>
  <meta name="keywords" content="${story.subTitle}"/>
  <meta name="description" content="${story.subTitle}"/>
  <jsp:include page="../common/common-css.jsp"></jsp:include>
  <jsp:include page="../common/common-js.jsp"></jsp:include>
  <style type="text/css">
    a {
      text-decoration: none
    }

    a:hover {
      text-decoration: none
    }

    a:link {
      text-decoration: none
    }

    a:visited {
      text-decoration: none
    }

  </style>
</head>
<body style="background-color: #f9f9f9;padding: 0px">
<jsp:include page="../../head.jsp"></jsp:include>
<div class="container-fluid" style="padding: 0px;">
  <div class="col-xs-0 col-sm-0 col-md-1 col-lg-2"></div>
  <div class="col-xs-12 col-sm-12 col-md-7 col-lg-5"
       style="background-color: #ffffff;padding: 0px;border-right: 1px solid #eaeaea;margin-bottom: 40px;margin-top: 15px">
    <table style="width: 100%">
      <tr>
        <td style="padding: 10px;">
          <h3>
            ${story.title}
          </h3>
          <hr style="width: 100%;">
        </td>
      </tr>
      <tr>
        <td style="padding: 10px;">
          <blockquote style="padding-left: 5px">
            ${story.subTitle}
          </blockquote>
        </td>
      </tr>
      <tr>
        <td style="padding: 10px;color: #cccccc">
          <span class="badge" style="background-color: #CC66CC">${story.tag}</span>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="padding: 10px;color: #999999">
          <p>
            <small class="auther"></small>
          </p>

          <p>
            <small>${story.createTime}&nbsp;&nbsp;阅读：${story.readCount}</small>
          </p>
        </td>
      </tr>
    </table>
    <table style="width: 100%">
      <tr>
        <td align="center" style="padding: 10px">
          <img src="${story.imgUrl}-750x500" class="img-responsive ">
        </td>
      </tr>
      <tr>
        <td style="padding: 10px">
          <p>
            ${story.content}
          </p>
        </td>
      </tr>
    </table>
    <hr style="width: 100%">
    <p style="padding-left: 10px;color: darkgray">阅读：${story.readCount}</p>

    <p style="padding-left: 10px;color: darkgray">
      <a href="<%=basePath%>/story"><i class="icon-eye-open">&nbsp;发现更多</i></a>
    </p>

    <p style="padding-left: 10px;color: darkgray">
      <a href="<%=basePath%>/writeStory"><i class="icon-facetime-video">&nbsp;写文章,做原创</i></a>
    </p>
    <hr style="width: 100%">
    <p style="padding-left: 10px">欢迎关注我们</p>

    <p style="padding-left: 10px">QQ官方群：221052890</p>

    <p style="padding-left: 10px">微信公众号：劉員外</p>
    <hr style="width: 100%">
    <table>
      <tr>
        <td colspan="2" style="padding: 30px 0px">
          <table style="width: 100%">
            <tr>
              <td style="width: 50%" align="center">
                <img src="<%=basePath%>/img/qqQrcode.png" class="img-responsive img-thumbnail"
                     style="width: 50%">

                <p style="padding-top: 5px">劉員外官方群</p>
              </td>
              <td style="width: 50%" align="center">
                <img src="<%=basePath%>/img/qrcode.jpg" class="img-responsive img-thumbnail"
                     style="width: 50%">

                <p style="padding-top: 5px">微信公众号</p>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3"style="padding: 0px 10px;margin-top: 15px">
    <div style="background-color: #ffffff;">
      <a href="<%=basePath%>/user/queryinfo?email=${story.email}">
        <div align="center"style="padding-top: 20px">
          <table>
            <tr>
              <td align="center" style="padding: 10px 0px">
                <c:choose>
                  <c:when test="${story.logo != nul and story.logo != ''}">
                    <img src="${story.logo}-120x120" style="width: 80px;height: 80px" class="img-responsive img-circle">
                  </c:when>
                  <c:otherwise>
                    <img src="<%=basePath%>/img/user.png" style="width: 80px;height: 80px"
                         class="img-responsive img-circle">
                  </c:otherwise>
                </c:choose>
              </td>
            </tr>
            <tr>
              <td align="center" style="padding: 10px 0px;color: #999999">
                ${story.name}：${story.remark}
              </td>
            </tr>
          </table>
        </div>
      </a>
      <hr style="width: 100%">
      <table style="width: 100%;">
        <tr>
          <td colspan="2" style="padding: 10px">
            <span>精彩评论</span>
          <span style="padding-left: 10px">
                        <a href="javascript:toReply('','')">
                          <i class="icon-edit"> &nbsp;写留言</i>
                        </a>
                    </span>
          </td>
        </tr>
        <tr>
          <td style="width: 50px;border-bottom: 1px solid green">&nbsp;</td>
          <td style="border-bottom: 1px solid #e8e8e8">&nbsp;</td>
        </tr>
        <tr class="commentBox" style="display: none">
          <td colspan="2">
            <table style="width: 100%;margin: 10px 0px">
              <tr>
                <td style="width: 100%;padding: 0px 5px">
                <textarea rows="3"
                          style="width: 100%;padding: 5px;background-color: #ffffff;resize: none;border: none"
                          id="comment" placeholder="在这儿输入留言"></textarea>
                </td>
              </tr>
              <tr>
                <td align="right">
                  <a class="btn btn-default-color" style="padding: 3px"
                     href="javascript:cancelReply();">&nbsp;取&nbsp;消&nbsp;</a>
                  <a class="btn btn-default-color" style="padding: 3px;margin-left: 10px"
                     href="javascript:reply('${story.uuid}','${story.email}')">&nbsp;回&nbsp;复&nbsp;</a>
                </td>
              </tr>
              <tr>
                <td>
                  <hr style="width: 100%;margin: 5px 0px">
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <div class="comments" style="padding: 10px 0px;">
        <p style="padding: 20px;color: #cccccc;display: none" class="allComments">Comments will be here!</p>
      </div>
      <p class="text-center commentsArea" style="padding: 40px 0px;color: #666666;">
        <i class="icon-spinner icon-spin"></i>&nbsp;正在加载数据......
      </p>

      <p class="text-center loadMore" style="padding: 40px 0px;display: none">
        <a href="javascript:void(0);" style="text-decoration: none">加载更多</a>
      </p>

      <div style="margin: 50px 0px">&nbsp;</div>
      <table style="width: 100%;">
        <tr>
          <td colspan="2" style="padding: 10px">十佳好文</td>
        </tr>
        <tr>
          <td style="width: 50px;border-bottom: 1px solid green">&nbsp;</td>
          <td style="border-bottom: 1px solid #e8e8e8">&nbsp;</td>
        </tr>
      </table>

      <div class="story" style="padding: 10px 0px">
        <p style="padding: 20px;color: #cccccc;display: none" class="NoStory">Top 10 stories will bu Here !</p>
      </div>
      <p class="text-center storyArea" style="padding: 40px 0px;color: #666666;">
        <i class="icon-spinner icon-spin"></i>&nbsp;正在加载数据......
      </p>
    </div>
  </div>
</div>
<input type="hidden" id="toEmail">
<jsp:include page="../common/common-html.jsp"></jsp:include>
</body>

<script type="application/javascript">
  var pageNo = 1;
  var pageSize = 10;

  function loadStory(pageNo, pageSize) {
    var url = "<%=basePath%>/story/list";
    var param = {pageNo: pageNo, pageSize: pageSize, orderField: "read_count", storyType: 0};
    var item = '';
    var logo = '';
    $.post(url, param, function (data, status) {
      var stories = data;
      $(".storyArea").remove();
      if (stories.length > 0) {
        $(".story").empty();
        for (var i = 0; i < stories.length; i++) {
          logo = '';
          if (stories[i].imgUrl == null || stories[i].imgUrl == '' || stories[i].imgUrl == undefined || stories[i].imgUrl == '<%=basePath%>/img/product.png') {
            logo = '<%=basePath%>/img/product.png';
          } else {
            logo = stories[i].imgUrl + '-360x200';
          }
          item = '';
          item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="background-color: #ffffff;padding: 0px 10px">';
          item += '<a style="text-decoration: none;" href="<%=basePath%>/story/info?uuid=' + stories[i].uuid + '">';
          item += '<div class=" col-xs-4 col-sm-4 col-md-4 col-lg-3 text-center"style="padding: 0px ;">';
          item += '<img class="img-responsive" src="' + logo + '" alt="' + stories[i].name + '">';
          item += '</div>';
          item += '<div class=" col-xs-8 col-sm-8 col-md-8 col-lg-9">';
          item += '<p style="font-weight: bold;">' + stories[i].title + '</p>';
          item += '<p style="color: #999999">' + stories[i].subTitle + '</p>';
          item += '<table style="width: 100%">';
          item += '<tr>';
          item += '<td><p><span class="badge" style="background-color: #CC66CC">' + stories[i].tag + '</span></p></td>';
          item += '<td align="right"><p style="color: #999999;" class="text-right"><small>阅读：' + stories[i].readCount + '</small></p></td>';
          item += '</tr>';
          item += '</table>';
          item += '</div>';
          item += '</a>';
          item += '<hr>';
          item += '</div>';
          item += '<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12"style="background-color: #ffffff;padding: 0px"><hr></div>';
          $(".story").append(item);
        }
      } else {
        $(".NoStory").show();
      }
    })
  }

  function incrReadCount() {
    var url = '<%=basePath%>/story/incrReadCount?uuid=${story.uuid}';
    $.post(url, function (data, status) {

    });
  }
  function loadComments(pageNo, pageSize) {
    var uuid = '${story.uuid}';
    var url = '<%=basePath%>/note/list';
    var param = {uuid: uuid, pageNo: pageNo, pageSize: pageSize};
    $.post(url, param, function (data, status) {
      $(".commentsArea").hide();
      if (data != null && data.length > 0) {
        $(".allComments").hide();
        var item = '';
        for (var i = 0; i < data.length; i++) {
          item += parseNote(data[i].email, data[i].logo, data[i].content, data[i].name, data[i].createTime);
        }
        $(".comments").append(item);
      } else {
        if (pageNo == 1 && data.length == 0) {
          $(".allComments").show();
        }
      }
      if (data.length < pageSize) {
        $(".loadMore").hide();
      } else {
        $(".loadMore").show();
      }
    })
  }

  function cancelReply() {
    $(".commentBox").hide();
    $("#comment").val('');
  }

  function toReply(toEmail, toName) {
    $("#toEmail").val(toEmail);
    if (toEmail != '') {
      $("#comment").val('@' + toName + ' ');
    }
    $(".commentBox").show();
    $("#comment").focus();
  }
  function parseNote(email, logo, content, name, createTime) {
    if (logo != null && logo != '' && logo != undefined) {
      logo += "-120x120";
    }
    if (logo == undefined) {
      logo = '<%=basePath%>/img/user.png';
    }
    var url = "<%=basePath%>/user/queryinfo?email=" + email;
    var subItem = '';
    subItem += '<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"style="padding: 0px">';
    subItem += '<table style="width: 100%;">';
    subItem += '<tr>';
    subItem += '<td style="width: 50px;height: 50px;padding-left: 10px" align="center" >';
    subItem += '<a href="' + url + '"><img class="img-responsive img-circle"  src="' + logo + '" /></a>';
    subItem += '</td>';
    subItem += '<td style="padding: 0px 0px 0px 5px;color: #999999;"><small>' + name + '</small></td>';
    subItem += '</tr>';
    subItem += '<tr>';
    subItem += '<td style="padding: 0px">&nbsp;</td>';
    subItem += '<td style="padding: 0px 0px 0px 5px;">' + content + '</td>';
    subItem += '</tr>';
    subItem += '<tr>';
    subItem += '<td style="padding: 0px">&nbsp;</td>';
    subItem += '<td style="color: #999999;padding: 0px 0px 0px 5px;">';
    subItem += '<small>' + createTime + '&nbsp;&nbsp;<a href="javascript:toReply(\'' + email + '\',\'' + name + '\');"><i class="icon-comments-alt"></i></a></small>';
    subItem += '</td>';
    subItem += '</tr>';
    subItem += '<tr><td>&nbsp;</td><td><hr style="width: 100%;margin: 0px;padding: 0px"></td></tr>';
    subItem += '</table>';
    subItem += '</div>';
    return subItem;
  }
  function reply(uuid, authEmail) {
    var title = '${story.title}';
    $(".btn").blur();
    var email = '<%=email%>';
    if (!validateEmail(email)) {
      return;
    }
    var content = $.trim($('#comment').val());
    if (content == '') {
      alerErr("输入留言内容");
      return;
    }
    var url = "<%=basePath%>/note/add";
    var toEmail = $("#toEmail").val();
    if (toEmail != '') {
      authEmail = toEmail;
    }
    var param = {content: content, uuid: uuid, toEmail: authEmail, title: title};
    $.post(url, param, function (data, status) {
      if (status == 'success') {
        $("#toEmail").val('');
        $('#comment').val('');
        $(".commentBox").hide();
        $(".allComments").remove();
        var temp = parseNote(data.data.email, data.data.logo, data.data.content, data.data.name, data.data.createTime);
        $('.comments').prepend(temp);
      } else {
        aler(data);
      }
    })
  }

  function loadAuther() {
    var temp = '作者：';
    var auther = '${story.name}';
    if (auther == '' || auther == undefined) {
      auther = '${story.email}';
    }
    temp += auther;
    $(".auther").text(temp);
  }
  $(function () {
    initStyle();
    incrReadCount();
    loadAuther();
    loadComments(pageNo++, pageSize);
    loadStory(0, pageSize);
    $('img').addClass('img-responsive ');
    $('pre').addClass('preNoBorder');

    $('.loadMore').click(function () {
      $(".commentsArea").show();
      $(".loadMore").hide();
      loadComments(pageNo++, pageSize);
    })
  })
</script>

</html>
